<!-- 司机管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="item">
        <div class="search-label">司机账号：</div>
        <el-input
          v-model="params.account"
          clearable
          placeholder="请输入司机账号"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">司机姓名：</div>
        <el-input
          v-model="params.name"
          clearable
          placeholder="请输入司机姓名"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">司机手机号：</div>
        <el-input
          v-model="params.phone"
          clearable
          placeholder="请输入司机手机号"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">所属机构:</div>
        <el-select v-model="params.agentId">
          <el-option
            v-for="item in organList"
            :key="item.id"
            :lebal="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <el-button
          type="warning"
          @click="doSearch"
        >搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div
      class="content"
      style="margin-left: 45px"
    >
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
          width="280"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="工作状态"
          :formatter="formatterStatus"
          width=""
        >
        </el-table-column>
        <el-table-column
          text-align-center
          label="操作"
          width=""
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              @click="editInfo(scope.row.userId)"
            >查看</el-button>
            <el-button
              type="text"
              @click="dialog(scope.row)"
            >配置车辆</el-button>
          </template>

        </el-table-column></el-table>
    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination
        style="text-align: center;"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+counts"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 提示框 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="dialogVisible1"
      width="25%"
    >
      <div class="tip">
        <div>配置车辆需满足以下条件:</div>
        <span>1. 司机信息已完善</span>
        <span>2. 司机已设置排班</span>
        <span>3. 司机绑定车辆未在启用状态</span>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="warning"
          @click="dialogTableVisible = true; dialogVisible1 = false"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置车辆弹框 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="dialogTableVisible"
      width="30%"
    >
      <div class="info">
        <div class="item">
          <div class="key">司机编号</div>
          <div class="value">{{ itemInfo.userId }}</div>
        </div>
        <div class="item">
          <div class="key">司机名称</div>
          <div class="value">{{ itemInfo.name }}</div>
        </div>
        <div class="item">
          <div class="key">司机电话</div>
          <div class="value">{{ itemInfo.mobile }}</div>
        </div>
        <div class="item">
          <div class="key">所属机构</div>
          <div class="value">{{ itemInfo.agency.name }}</div>
        </div>
      </div>
      <div class="sj">
        <div class="pz">配置司机</div>
        <el-input v-model="itemInfo.truck.licensePlate"></el-input>
      </div>
      <el-table :data="[]">
        <el-table-column
          property="date"
          label="车牌号"
        ></el-table-column>
        <el-table-column
          property="name"
          label="车辆状态"
        ></el-table-column>
        <el-table-column
          property="address"
          label="操作"
        ></el-table-column>
      </el-table>
      <div class="btn">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button
          type="warning"
          @click="submit"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { driverList } from '@/api/transit'
export default {
  name: 'Courses',
  data() {
    return {
      params: {
        account: '', // 司机编号
        agentId: '', // 机构ID
        truckTypeId: null, // 车辆ID
        name: '', // 司机姓名
        phone: null, // 手机号
        workStatus: '', // 工作状态
        page: 1, // 页码
        pageSize: 10 // 页尺寸
      },
      list: [], // 司机列表
      organList: [], // 机构列表
      total: 0, // 总页数
      counts: 0, // 总条数
      itemInfo: {
        userId: '',
        name: '',
        mobile: '',
        agency: {
          name: ''
        },
        truck: {
          licensePlate: ''
        }
      },
      dialogVisible1: false, // 弹框开关
      dialogTableVisible: false // 配置车辆弹框
    }
  },
  created() {
    this.getDriverList()
  },
  methods: {
    // 获取司机列表
    async getDriverList() {
      const res = await driverList(this.params)
      this.list = res.data.items
      this.counts = +res.data.counts
    },
    // 搜索
    doSearch() {
      this.params.page = 1
      this.getDriverList()
    },
    // 分页器
    handleCurrentChange(num) {
      this.params.page = num
      this.getDriverList()
    },
    // 处理工作状态的显示
    formatterStatus(row) {
      const MAP = {
        0: '休息',
        1: '上班'
      }
      return MAP[row.workStatus]
    },
    // 查看详情
    editInfo(id) {
      this.$router.push({
        path: '/transit/driver-detail',
        query: {
          id
        }
      })
    },
    // 配置车辆
    dialog(row) {
      this.itemInfo = row
      this.dialogVisible1 = true
    },
    // 配置司机提交
    submit() {
      this.dialogTableVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px;
  background-color: #fff;
 .item {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 30px;
  .search-label {
    width: 100px;
  }
  .search-main {
    width: 450px;
    margin-right: 10px;
  }
 }
}
.top {
    padding-left: 14px;
    height: 100px;
    line-height: 100px;
    background-color: #fff;
  }

  .edit {
    color: #419EFF;
  }

  .del {
    color: #F56C6C;
  }

  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
  .page-container{
    height: 200px;
  padding:4px 0px;
  text-align: right;
}
.tip {
  padding: 20px;
  div {
    margin-bottom: 10px;
  }
  span {
    display: inline-block;
    margin-bottom: 10px;
    width: 200px;
  }
}
.info {
  padding-left: 30px;
  display: flex;
  flex-wrap: wrap;
  .item {
    display: flex;
    margin-bottom: 20px;
    margin-right: 20px;
    .key {
      width: 80px;
    }
    .value {
      width: 150px;
    }
  }
}
.sj {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 30px;
    .pz {
      width: 80px;
    }
  }
  .btn {
    text-align: center;
    margin-top: 30px;
  }
</style>

